<!DOCTYPE html>
<html lang="zh"
      xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html"
>
<head>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/font/iconfont.css}" media="all"/>
<body class="childrenBody">
    <div th:each=" name : ${dataGroup}">
        <div class="layui-col-md2" style="margin: 50px;height: 100px;width: 100px;text-align: center;padding: 20px;cursor:pointer;"
             th:switch="${name}" th:onclick="queryDevice([[${name}]])" >
            <span class="iconfont iconwendu" th:case="温度" style="color: #009688;"></span>
            <span class="iconfont iconshidu" th:case="湿度" style="color: #009688;text-align: center;"></span>
            <span class="iconfont iconhuanjingzaosheng" th:case="噪声" style="color: #009688;"></span>
            <span class="iconfont" th:case="PM1.0" ><span style="color: #009688;font-size: 30px;">PM1.0</span></span>
            <span class="iconfont iconpm25ganyingqibeifen" th:case="PM2.5" style="color: #009688;"></span>
            <span class="iconfont iconapp_icons--1" th:case="PM10" style="color: #009688;"></span>
            <span class="iconfont iconfengsu" th:case="风速" style="color: #009688;"></span>
            <span class="iconfont iconfengxiang" th:case="风向" style="color: #009688;"></span>
            <span class="iconfont iconeryanghuatan" th:case="CO2" style="color: #009688;"></span>
            <span class="iconfont icontvoc" th:case="TVOC" style="color: #009688;"></span>
            <span class="iconfont iconapp_icons--" th:case="甲醛" style="color: #009688;"></span>
            <span class="iconfont iconkongqizhiliangjianceshujufenxi" th:case="AQS" style="color: #009688;"></span>
            <span class="iconfont icondianyabiao" th:case="电压" style="color: #009688;"></span>
            <span class="iconfont icondianliu" th:case="电流" style="color: #009688;"></span>
            <span class="iconfont iconjiawan" th:case="甲烷" style="color: #009688;"></span>
            <br/><br/>
                <th th:text="${name}"></th>
        </div>
    </div>
<table class="layui-table" id="deviceData" lay-filter="deviceData"></table>
</body>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" >
    layui.config({
        base: "/js/modules/"
    }).extend({
        "listView": "listView"
    });
    layui.use(['form', 'listView', 'jquery', 'common', 'table'], function () {
        let form = layui.form,
            common = layui.common,
            layer = layui.layer,
            table = layui.table,
            $ = layui.$;

        window.queryDevice = function(dataName) {
            layer.open({
                type: 2 //此处以iframe举例
                // ,title: ''
                ,area: ['100%', '100%']
                ,shade: 0.4
                ,maxmin: true
                ,content: 'toPage?dataName='+dataName
            });
        }

    });

</script>
</html>
